<template>
  <div class="goods">
    <el-card class="box-card search-from">
      <el-form ref="ruleFormRef" :model="source.searchForm" :inline="true">
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="source.searchForm.goodsName" type="text" />
        </el-form-item>
      </el-form>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="onSearch">查询</el-button>
        <el-button type="danger" :icon="Position" @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-card>
    <el-card class="box-card mt10 main-talbe">
      <el-table :data="source.goodsTableData.content" stripe style="width: 100%" border>
        <el-table-column prop="goodsDefaultImg" label="商品图片" align="center">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-image
                v-if="!scope.row.goodsDefaultImg"
                style="width: 150px; height: 100px margin: 0px auto;"
                :src="notData"
                fit="fill"
              />
              <el-image
                v-else
                style="width: 150px; height: 100px; margin: 0px auto"
                :src="scope.row.goodsDefaultImg"
                fit="fill"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" align="center" />
        <el-table-column prop="publishDate" label="发布时间" align="center" />
        <el-table-column prop="memberPrice" label="会员价格" align="center">
          <template #default="scope">
            <span>{{ scope.row.memberPrice }}￥</span>
          </template>
        </el-table-column>
        <el-table-column prop="marketPrice" label="成价格" align="center">
          <template #default="scope">
            <span>{{ scope.row.memberPrice }}￥</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" @click="onEdit(scope.row.id)">编辑</el-button>
            <el-button type="danger" @click="onDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script setup lang="ts" name="list-commodity">
import notData from "@/assets/images/notData.png";
import { Search, Position } from "@element-plus/icons-vue";
import { Goods, ResPage } from "@/api/interface";
import { onMounted, reactive, ref } from "vue";
import { ElNotification, type FormInstance } from "element-plus";
import { listPageApi, delApi } from "@/api/modules/goods";
import { useRouter } from "vue-router";
const ruleFormRef = ref<FormInstance>();
const router = useRouter();
const source = reactive({
  searchForm: {} as Goods.Query,
  goodsTableData: {} as ResPage<Goods.ListData>
});
onMounted(() => {
  onSearch();
});
const onSearch = () => {
  listPageApi(source.searchForm).then(({ data }) => {
    source.goodsTableData = data;
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const onDel = (id: string) => {
  delApi(id).then(() => {
    onSearch();
    ElNotification({
      title: "温馨提示",
      message: `删除成功！`,
      type: "success"
    });
  });
};
const onEdit = (id: string) => {
  router.push({ path: "/goods_edit", query: { id: id } });
};
</script>
<style scoped lang="scss">
.goods {
  height: 100%;
  display: flex;
  flex-direction: column;

  .main-talbe {
    flex: 1;
  }
}
</style>
